<template>
  <div class="order">
    <div class="topNav">
      <van-nav-bar
        title="订单详情"
        left-text="返回"
        left-arrow
        @click-left="quit"
      />
    </div>
    <div class="chooseAddress">
      <van-cell is-link @click="showPopup">选择地址</van-cell>
      <div class="address" v-if="list.length > 0">
        <div class="my" >
          {{ list[choseIndex].name}}
          <span>{{ list[choseIndex].tel}}</span>
          <van-tag v-if="list[choseIndex].isDefault" mark color="#0C34BA"
            >默认</van-tag
          >
        </div>
        <div class="add">{{ list[choseIndex].address}}</div>
      </div>
      <div class="allinfo">
      <div class="information">
        <h3>订单信息</h3>
        <div class="shoplist" v-for="item in shopbag" :key="item.sid">
          <Good :isHasCheckbox="false" :goodData="item" :isSlide="false">
            <div class="num">x{{ item.count }}</div>
          </Good>
        </div>
        <div class="price">
          总计 {{ allnum }} 件 <span>合计 &yen;{{ total }}</span>
        </div>
      </div>
      </div>
      <div class="chooselist">
        <div class="btn">
          <van-button type="primary" size="large" @click="submit"
            >提交订单</van-button
          >
        </div>
        <van-popup
          v-model="show"
          :lockScroll="scroll"
          position="bottom"
          :style="{ height: '40%' }"
        >
          <h3>选择地址</h3>
          <van-address-list
            @select="changeAdd"
            v-model="chosenAddressId"
            :list="list"
            default-tag-text="默认"
            @add="onAdd"
            @edit="onEdit"
          >
          </van-address-list>
        </van-popup>
        <div class="psd">
          <van-popup
            v-model="showPsw"
            position="bottom"
            closeable
            :style="{ height: '55%' }"
          >
            <div class="inp">输入密码</div>
            <van-password-input
              :value="value"
              :focused="showKeyboard"
              :error-info="errorInfo"
            />
            <!-- 数字键盘 -->
            <van-number-keyboard v-model="value" :show="showKeyboard" />
          </van-popup>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Good from "../components/Good";
export default {
  name: "Order",
  data() {
    return {
      chosenAddressId: "1",
      show: false,
      showPsw: false,
      sid: [],
      value: "",
      showKeyboard: true,
      list: [
        {
          name: "",
          tel: "",
          isDefault: "",
          address: "",
        },
      ],
      shopbag: [],
      scroll: false,
      choseIndex: 0,
      total: 0,
      allnum: 0,
      pswvalue: "",
      errorInfo: "",
    };
  },

  methods: {
    // 添加地址
    onAdd() {
      this.$router.push({ name: "NewAddress" });
    },
    // 编辑地址
    onEdit(item) {
      this.$router.push({ name: "NewAddress", params: { aid: item.aid } });
    },
    // 控制地址内容显示
    showPopup() {
      this.show = true;
    },
    // 返回上一级
    quit() {
      this.$router.go(-1);
    },
    // 获取地址列表
    getAddress() {
      let token = this.$cookies.get("TOKEN");

      this.axios({
        method: "GET",
        url: "/findAddress",
        params: {
          tokenString: token,
        },
      })
        .then((res) => {
          
          if (res.data.code == 700) {
            //用户未登录, 拦截操作, 通知用户去登录
            this.$toast("请先登录");
            setTimeout(() => {
              this.$router.push({ name: "Login" });
            }, 2000);
            return;
          }

          if (res.data.code === 20000) {
            res.data.result.forEach((v, index) => {
              // 给每个地址添加单独下标
              v.id = index;
              v.isDefault = Boolean(v.isDefault);
              v.address = `${v.province}${v.city}${v.county}${v.addressDetail}`;
            });
          }
          this.list = res.data.result;
        })
        .catch((err) => {
          
        });
    },
    // 切换地址
    changeAdd(item) {
      this.choseIndex = item.id;
      this.show = false;
    },
    // 获取购物袋内容
    getShopbag(sids) {
      let token = this.$cookies.get("TOKEN");
      this.axios({
        method: "GET",
        url: "/commitShopcart",
        params: {
          tokenString: token,
          sids: JSON.stringify(sids),
        },
      })
        .then((res) => {
          if (res.data.code == 700) {
            //用户未登录, 拦截操作, 通知用户去登录
            this.$toast("请先登录");
            setTimeout(() => {
              this.$router.push({ name: "Login" });
            }, 2000);
            return;
          }

          if (res.data.code === 50000) {
            this.shopbag = res.data.result;
          }
          this.sum();
        })
        .catch((err) => {
          
        });
    },
    // 计算商品总价
    sum() {
      let total = 0;
      let allnum = 0;
      this.shopbag.forEach((v) => {
        allnum += v.count;
        total += v.count * v.price;
      });
      this.total = total;
      this.allnum = allnum;
    },
    // 提交订单输入密码
    submit() {
      this.showPsw = true;
    },
  },
  components: {
    Good,
  },
  watch: {
    // 判断密码是否正确
    value(value) {
      if (value.length === 6 && value !== "123456") {
        this.errorInfo = "密码错误";
      } else if (value.length === 6 && value === "123456") {
        this.showPsw = false;
        this.value = "";
        let token = this.$cookies.get("TOKEN");
        this.axios({
          method: "POST",
          url: "/pay",
          data: {
            tokenString: token,
            sids: JSON.stringify(this.sid),
            phone:this.list[this.choseIndex].tel,
            address:this.list[this.choseIndex].address,
            receiver:this.list[this.choseIndex].name
          },
        })
          .then((res) => {
            
            if (res.data.code == 700) {
              //用户未登录, 拦截操作, 通知用户去登录
              this.$toast("请先登录");
              setTimeout(() => {
                this.$router.push({ name: "Login" });
              }, 2000);
              return;
            }
            if(res.data.code ==60000){
              //修改购物袋数量
                this.$root.publicShopbagCount -= this.allnum;
                if(this.$root.publicShopbagCount === 0){
                  this.$root.publicShopbagCount = ""
                }
              this.$router.push({name:'Myorder'})
            }
          })
          .catch((err) => {
            
          });
      } else {
        this.errorInfo = "";
      }
    },
  },
  created() {
    let sids = this.$route.query.sids;
    this.sid = sids.split("-");
    this.getAddress();
    this.getShopbag(this.sid);
  },
};
</script>

<style lang="less" scoped>
.order {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgb(247, 247, 247);
}
.topNav {
  position: sticky;
  top: 0;
  /deep/ .van-nav-bar__text {
    color: #0c34ba;
  }
  /deep/ .van-nav-bar .van-icon {
    color: #0c34ba;
  }
}
.psd {
  text-align: center;
  /deep/ .van-password-input {
    background-color: white;
    position: absolute;
    bottom: 230px;
    left: 0;
    right: 0;
  }
  /deep/ .van-number-keyboard{
    padding-bottom: 0;
  }
  .inp {
    padding: 5px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    margin-top: 15px;
  }
}

.chooseAddress {
  padding: 1px;
  margin: 10px;
  box-sizing: border-box;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.address {
  padding: 0px 15px;
  background-color: white;
  .my {
    padding: 5px 0;
    font-size: 14px;
    color: #0c34ba;
    span {
      color: gray;
      font-size: 12px;
      padding: 0 10px;
    }
    /deep/ .van-tag {
      color: white;
      font-size: 10px;
      border-radius: 15px;
      padding: 0px 5px;
      height: 18px;
    }
  }
  .add {
    font-size: 12px;
    color: gray;
    padding: 5px 0;
    padding-bottom: 10px;
  }
}
.allinfo{
  overflow-y: auto;
  position: fixed;
  top: 166px;
  bottom: 80px;
  left: 10px;
  right: 10px;
}
.information {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-color: white;
  margin-top: 10px;
  overflow-y: auto;
  h3 {
    padding: 0px 15px;
  }
}
.chooselist {
  h3 {
    padding: 0;
    margin: 0;
    padding: 15px 0 0 50px;
  }
}
/deep/ .van-radio-group {
  overflow-y: auto;
  position: fixed;
  top: 67%;
  left: 0;
  bottom: 50px;
  right: 0;
}

/deep/ .van-address-list__bottom {
  position: fixed;
  bottom: 0;
}
.num {
  margin-top: 15px;
}

.price {
  border-top: 1px solid rgba(22, 22, 22, 0.2);
  margin: 0 10px;
  padding: 10px 0 ;
  font-size: 14px;
  span {
    position: absolute;
    right: 20px;
  }
}
.btn {
  position: fixed;
  bottom: 10px;
  left: 25px;
  right: 20px;
}
/deep/ .van-button {
  background-color: #0c34ba;
  border-color: #0c34ba;
  border-radius: 25px;
}
</style>